<template>
  <div class="w usercenter">
    <div class="search-nav">
      <div class="search-nav-container w">
        <ul>
          <li>我的订单</li>
        </ul>
      </div>
    </div>
    <div class="user-tabs">
      <!-- <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane label="待付款" name="ready"> -->
      <el-table class="oredr-table" :data="tableData" border style="width: 100%;" @selection-change="handleSelectionChange" :max-height="tableHeight">
        <template slot="empty">
          <p class="emptyText">暂无订单信息</p>
        </template>
        <el-table-column type="selection" width="44" align="center">
        </el-table-column>
        <el-table-column type="index" align="center">
        </el-table-column>
        <el-table-column prop="date" label="快照" width="180" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.picture" style="height:80px;width:100px;" alt="" srcset="">
          </template>
        </el-table-column>
        <el-table-column prop="commodity" label="商品信息" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="totalAmount" label="订单金额" show-overflow-tooltip align="center" width="120">
          <template slot-scope="scope">
            {{scope.row.totalAmount}} 元
          </template>
        </el-table-column>
        <el-table-column prop="username" label="外卖员" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{scope.row.username || '-'}}
          </template>
        </el-table-column>
        <el-table-column prop="phonenumber" label="外卖员手机号" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{scope.row.phonenumber || '-'}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="提交日期" align="center">
        </el-table-column>
        <!-- <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="orderCancel(scope.row)">取消订单</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <div class="pay-container">
            <div class="pay-box">
              <p>
                <span>应付总额：</span> <span class="money">
                  <Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}
                </span>
              </p>
              <div class="pay-btn">
                <Button type="error" size="large" @click="order()">立即付款</Button>
              </div>
            </div>
          </div> -->
      <!-- </el-tab-pane>
        <el-tab-pane label="已完成" name="success"> -->
      <!-- <el-table class="oredr-table" :data="successTableData" border style="width: 100%" :max-height="tableHeight">
            <template slot="empty">
              <p class="emptyText">暂无订单信息</p>
            </template>
            <el-table-column :selectable="selectable" type="selection" width="44" align="center">
            </el-table-column>
            <el-table-column type="index" align="center">
            </el-table-column>
            <el-table-column prop="date" label="快照" width="180" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.picture" style="height:80px;width:100px;" alt="" srcset="">
              </template>
            </el-table-column>
            <el-table-column prop="commodity" label="商品信息" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="totalAmount" label="订单金额" show-overflow-tooltip align="center" width="120">
              <template slot-scope="scope">
                {{scope.row.totalAmount}} 元
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="提交日期" align="center">
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button type="success" size="mini" icon="el-icon-magic-stick" @click="goPingJia(scope.row)">立即评价</el-button>
              </template>
            </el-table-column>
          </el-table> -->
      <!-- </el-tab-pane>
      </el-tabs> -->
    </div>

    <el-dialog title="商品评价" :visible.sync="dialogVisible" width="30%" @close="handleClose">
      <el-form :model="dialogForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
        <el-form-item label="谈谈对该商品的看法" prop="content">
          <el-input v-model="dialogForm.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="请为该商品评分" prop="content">
          <el-rate v-model="dialogForm.star" :colors="colors">
          </el-rate>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPingJia">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderList, orderCancel, toAlipayRecharge, pingJiaApi } from '@/api/goods'
export default {
  data() {
    return {
      tableHeight: 500,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      searchVal: null,
      emptyData: [],
      tableData: [],
      successTableData: [],
      orderCheckList: [],
      activeTab: "ready",
      dialogVisible: false,
      dialogForm: {
        content: '',
        commodityId: '',
        userId: '',
        star: null,
      }
    }
  },
  created() {
    // 获取订单列表
    if (!sessionStorage.getItem('userToken')) {
      this.$alert('请登录', '系统提示', {
        confirmButtonText: '确定',
        callback: action => {
          this.$router.push({ path: '/dianShangLogin' }).catch(() => { });
        }
      });
    } else {
      this.getOrderList(2)
    }
  },
  mounted() {
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    this.$nextTick(function () {
      this.tableHeight = h - 480
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = h - 480
      }
    })
  },
  destroyed() {
    window.onresize = null
  },
  computed: {
    totalPrice() {
      let price = 0;
      this.orderCheckList.forEach(item => {
        price += item.totalAmount;
      });
      return price;
    }
  },
  methods: {
    // status:3 已完成 4 待完成
    getOrderList(status) {
      let params = { attributionId: this.$store.state.dianUser.dianUserId, status: status }
      orderList(params).then(res => {
        // if (status == 3) {
        //   this.successTableData = res.data
        // } else {
        this.tableData = res.data
        // }
      })
    },
    handleSelectionChange(e) {
      this.orderCheckList = e;
    },

    // tabs点击
    handleClick(tab, event) {
      if (tab.name == 'success') {
        // 获取订单列表
        this.getOrderList(3)
      } else {
        // 获取订单列表
        this.getOrderList(4)
      }
    },
    // 删除订单
    orderCancel(row) {
      this.$confirm('是否删除当前订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderCancel(row).then(res => {
          this.getOrderList()
        })
      }).catch(() => { })
    },
    // 提交订单
    order() {
      if (this.orderCheckList.length > 0) {
        let outTradeNos = this.orderCheckList.map(item => item.orderId)
        let totalAmount = this.orderCheckList.map(item => item.totalAmount.toString())
        toAlipayRecharge({ outTradeNos: outTradeNos, totalAmount: totalAmount }).then(res => {
          this.$modal.msgSuccess('付款成功')
          this.getOrderList()
        })
      }
    },
    // 评价
    goPingJia(item) {
      // this.dialogForm = JSON.parse(JSON.stringify(item))
      this.dialogForm.commodityId = item.shopId
      this.dialogForm.userId = item.attributionId
      this.dialogVisible = true
    },
    submitPingJia() {
      const that = this
      pingJiaApi(this.dialogForm).then(result => {
        if (result.code == 200) {
          this.$alert('已成功评价', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              that.dialogVisible = false
              that.$router.push({ path: '/' }).catch(() => { });
            }
          })
        }
      })
    },
    handleClose() {
      this.dialogForm = {
        content: '',
        commodityId: '',
        userId: '',
        star: null,
      }
    },
    selectable(row, index) {
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.usercenter {
  height: calc(100% - 162px);
}
.saerach-view {
  width: 300px;
}
.oredr-table {
  margin: 12px 0;
}
// 支付
.pay-container {
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
.pay-box {
  font-size: 18px;
  font-weight: bolder;
  color: #495060;
}
.money {
  font-size: 26px;
  color: #f90013;
}
.pay-btn {
  margin: 15px 0px;
  display: flex;
  justify-content: flex-end;
}
.user-tabs ::v-deep {
  .el-tabs__item.is-active {
    color: #c86147;
  }
  .el-tabs__active-bar {
    background-color: #c86147;
  }
}
</style>